
<script setup lang="ts">

import { useRoute,useRouter} from 'vue-router';

const  router =useRouter()

function backClick(){
  router.go(-1);
}
function changecenterClick(){
    router.push('/sale/step22')
}
</script>
<template>
<main class="box">
    <header class="header">
      <slot  name="left">
      <div class="back">
        <van-icon color="#d6d6d6" size="20" @click="backClick" name="arrow-left" />
        <span @click="backClick">返回</span>
      </div>
 
      </slot>
      <span>我的优惠劵</span>
      <slot name="right"></slot>
  </header>
  <div class="content">
    <van-cell @click="changecenterClick" class="changecenter" title="兑换中心" is-link />
    <van-image class="nosale" src="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E6%88%91%E7%9A%84%E9%92%B1%E5%8C%85/u2860.svg"></van-image>
    <div class="nouse">暂无可用优惠劵</div>
  </div>
</main>
</template>

<style lang="scss" scoped>
.header{
    color: black;
    background-color: white;
   .back{
    position: absolute;
    left: 0;
    top: 0;
    span{
        color: blue;
    }
   }
}
.box{
    background-color: #f4f6f9;
}
.body,.box,.content{
    width: 100%;
    height: 100%;
    background-color: #f4f6f9;
    .changecenter{
        width: 100%;
        height: 0.5rem;
        margin: 20px 0;
        font-size: 17px;
       padding: 20px 20px 0;
    }
    .nosale{
        width: 200px;
        margin: 100px 120px  10px;
       
    }
    .nouse{
        font-size: 16px;
        margin: 10px auto;
        text-align: center;
    }
}
</style>
